<template>
	<view class="mine-page page">
		<view class="form-block">
			<view class="user-photo-block">
				<button class="upload-photo-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar"
					hover-class="none">
					<image :src="cloudStorage+form.faceUrl" class="user-photo ps"></image>
				</button>
			</view>
			<view class="form-item">
				<view class="form-label">昵称</view>
				<input type="nickname" class="mine-name" :value="form.name" placeholder="请输入昵称" @blur="bindblur"
					@input="bindinput" />
			</view>
			<view class="form-item">
				<view class="form-label">手机号码</view>
				<input class="mine-name" v-model="form.phone" disabled="true" />
			</view>
			<view class="form-item">
				<view class="form-label">所在区域</view>
				<input class="mine-name" v-model="areaInfo.area" disabled="true" placeholder="请选择所在区域"
					@click="navigate('/page_other/region/index?type=2')" />

			</view>
		</view>
		<view class="btn-item">
			<view @click="submit" class="btn normal">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		getUserInfo,
		addAndUpdateUser
	} from '@/api/home.js';
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		getStorage,
		showToast
	} from '@/util/auth';
	export default {
		data() {
			return {
				form: {
					faceUrl: '',
					name: '',
					phone: '',
					areaId: '',
					cityId: ''
				},
				rule: {
					faceUrl: {
						name: '头像',
						required: true
					},
					name: {
						name: '昵称',
						required: true
					},
					cityId: {
						name: '所在区域',
						required: true
					}
				},
				areaInfo: {
					area: ''
				}
			}
		},
		methods: {
			bindblur(e) {
				this.form.name = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.form.name = e.detail.value;
			},
			async submit() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '保存中',
						mask: true
					})
					addAndUpdateUser(this.form).then(() => {
						this.$store.dispatch('user/getUser')
						this.showToast('保存成功', () => {
							uni.redirectTo({
								url: '/page_other/mine/mine'
							});
						})
					})
				}
			},
			chooseAvatar(e) {
				uploadFile(e.detail.avatarUrl).then(res => {
					this.form.faceUrl = res.url;
				})
			},
			getInfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfo().then(res => {
					Object.keys(this.form).forEach(item => {
						this.form = res
						if (res.areaName) {
							this.areaInfo.area = res.cityName + '-' + res.areaName
						}
					})
				})
			}
		},
		onLoad(e) {
			this.getInfo()
			uni.$on('selectArea', (selectData) => {
				this.areaInfo = selectData;
				this.form.areaId = selectData.areaId
			})
			uni.$on('cityItem', (selectCity) => {
				this.cityInfo = selectCity;
				this.form.cityId = selectCity.cityId
			})
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;
		padding: 30rpx;

		.form-block {
			background: #fff;
			border-radius: 12px;
			overflow: hidden;
			padding: 30rpx;

			.user-photo-block {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				margin: 20rpx auto;


				.upload-photo-btn {
					width: 100%;
					height: 100%;
					position: relative;
					padding: 0;
				}

				.user-photo {
					width: 100%;
					height: 100%;
				}

				.user-photo.ps {
					position: absolute;
					left: 0;
					top: 0;

				}
			}

			.form-item {
				width: 100%;
				height: 100rpx;
				border-top: 1px solid #F8F8F8;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				position: relative;

				.form-label {
					width: 160rpx;
				}

				.form-ctrl {
					width: calc(100% - 160rpx);
				}

				.getPhone {
					width: calc(100% - 220rpx);
					height: 100%;
					position: absolute;
					left: 190rpx;
					z-index: 1;
					display: flex;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}

		.btn-item {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			.btn {
				width: 300rpx;
				height: 80rpx;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn.normal {
				color: #fff;
				background: #FF3B2F;
			}
		}
	}
</style>

<style>
</style>